<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>

      <div class="r">
        <ul>
          <!-- <li @click="toShowToast"> -->
          <li>
            <img
              class="avatar"
              width="26px"
              height="26px"
              :src="userInfo.headImg"
              alt=""
            />
            用户名：{{userInfo.nickName}}
          </li>
          <li>我的鸡腿:{{userInfo.coin}}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login-btn" @click="toLogin" v-show="!isLogined">登录</li>
          <li class="cart-btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations,mapState,mapActions } from "vuex";
import {weixinLoginAPI} from '../request/api'
export default {
  data() {
    return {
      // cart: 0,
    };
  },
  /* watch:{
    "$route.path":{
      handler(newVal,oldVal){
        console.log("这个方法什么时候执行",newVal,oldVal);

        let myToken=localStorage.getItem("x-auth-token")

        this.chenIsLogined(Boolean(myToken))
      }
    }
  }, */
  created(){
    // setTimeout(async()=>{
      this.$nextTick().then(async()=>{
        //获取code---方法有push和query---&类型用query
      //1.扫描后微信平台返回code
      let mycode=this.$route.query.code;
      // console.log("mycode为:",this.$route.query);
      if(mycode){
        //2.扫描后通过code向微信平台发送请求
        let res=await weixinLoginAPI({
          code:mycode
        });
        //3.返回三种情况
        //3-1 0 登录成功  3-2 400 code 过期5的情况 3-3 407 用户的微信还没有在这个网站上绑定手机
        if(res.code==0){
          //登录成功
          // console.log(res.code);
          this.asyncChenIsShowToast({
              msg: "登录成功",
              type: "success",
            });
            //报错token值到localStorage中
            localStorage.setItem("x-auth-token", res["x-auth-token"]);
            //登录状态的转换
            this.chenIsLogined(true);
            //并且清除浏览器地址栏是code
            this.$router.push(this.$route.path);

            //请求用户信息
            this.asyncChenUserInfo()
        }else if(res.code==400){
          //code 过期5的情况
          //提示用户重新扫描
          this.asyncChenIsShowToast({
            msg:"二维码过期,请重新扫描登录!",
            type:"warningr"
          })
          this.chenIsShowLoginModel(true)
        }else if(res.code==407){
          //用户的微信还没有在这个网站上绑定手机
          //人用户绑定手机就可以
          //绑定手机号登录并且携带uuid后端会自动绑定
          this.asyncChenIsShowToast({
            msg:"请使用手机号绑定登录微信!",
            type:"warningr"
          })
          this.chenIsShowLoginModel(true)
          //通过有没有uuid 判断这个手机号有没有扫描绑定 
          localStorage.setItem("uuid",res.uuid)
        }
      }else{
        let mytoken=localStorage.getItem("x-auth-token");
        //显示购物车
        this.chenIsLogined(Boolean(mytoken))
        if(mytoken){
          this.asyncChenUserInfo()
        }else{
          this.initUserInfo()
        }
      }
      })
      
  },
  computed:{
    ...mapState({
      isLogined:state=>state.loginStatus.isLogined,
      userInfo:state=>state.userInfo.userInfo,
      cartTotal:state=>state.userInfo.cartTotal
    })
  },
  methods: {
    ...mapMutations({
      chenIsShowLoginModel: "showLoginModel/chenIsShowLoginModel",
      chenIsShowToast:"showToast/chenIsShowToast",
      chenIsLogined:"loginStatus/chenIsLogined",
      initUserInfo:"userInfo/initUserInfo"
    }),
    ...mapActions({
      asyncChenIsShowToast:'showToast/asyncChenIsShowToast',
      asyncChenUserInfo:"userInfo/asyncChenUserInfo"
    }),
    toLogin() {
      this.chenIsShowLoginModel(true);
    }, 
    /* toShowToast(){
      //把状态框的变量以对象的形式带入vuex中,再通过三元表达式来展示
      this.asyncChenIsShowToast({
        msg:"登录成功",
        type:"success"
      })   
    } */
    
  },

};
</script>
 
<style lang = "less" scoped>
.top-bar {
  height: 40px;
  background: #242b39;
  .top-bar-wrap {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r {
      ul {
        display: flex;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20px;
          cursor: pointer;
          .avatar {
            border-radius: 50%;
            margin-right: 6px;
          }
          &.login-btn {
            width: 124px;
            height: 40px;
            background: #0a328e;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.cart-btn {
  width: 124px;
  height: 40px;
  background: #0a328e;
  img {
    margin-right: 6px;
  }
  b {
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-left: 6px;
    background-color: #f40;
    text-align: center;
    border-radius: 50%;
  }
}
</style>